<template>
  <div class="make-copy select-person">
    <h3 class="title vux-1px-t">抄送人</h3>
    <flexbox class="select-images-list" wrap="wrap" align="flex-start">
      <flexbox-item v-for="(item, index) in resultList" :key="index">
        <i class="remove-icon" v-if="item.removeSwitch !== false" @click="removePerson(index)"></i>
        <div class="img-box">
          <img :src="item.avatar">
        </div>
        <p class=name>{{item.name}}</p>
      </flexbox-item>
      <flexbox-item class="select-img" @click.native="selectPerson"></flexbox-item>
    </flexbox>
  </div>
</template>

<script>
  import { Flexbox, FlexboxItem } from 'vux';
  export default {
    name: 'MakeCopy',
    data () {
      return {
        resultList: []
      };
    },
    props: ['makeCopyParams'],
    components: {
      Flexbox,
      FlexboxItem
    },
    watch: {
      $route () {
        let paramsResultList = this.$route.params.resultList;
        let paramsIsBack = this.$route.params.isBack;
        if (paramsResultList) {
          this.resultList = paramsResultList;
        } else if (paramsIsBack) {
          // 如果是從選擇抄送人頁面點擊返回跳轉過來就不做操作
        } else {
          this.resultList = this.makeCopyParams;
        }
      }
    },
    mounted () {
    },
    methods: {
      selectPerson: function () {
        localStorage.setItem('MakeCopyType', this.$route.name);
        this.$router.push({
          name: 'SelectPerson',
          params: {resultList: this.resultList},
          query: this.$route.query
        });
      },
      removePerson: function (index) {
        this.resultList.splice(index, 1);
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import '../../assets/style/variable';
  .make-copy{
    margin-bottom: getRem(160);
    .title{
      &:before{
        border-top-color: #e6e6e6;
      }
    }
  }
</style>
